<template>
	<view class="content m-pl-40 m-pr-40">
		<!-- Logo -->
		<image
			class="logo"
			src="/static/images/logo.png"
		/>
		<!-- 标题 -->
		<view class="h1 m-mb-80">
			<text>mu-uniapp-vite</text>
			<br />
			<text>v1.0.0</text>
		</view>
		<!-- 项目描述 -->
		<view class="p border">
			这是一个极简的
			<text>uniapp + vite/4 + vue/3</text>
			项目模板。 是为了响应个别开发者对项目有着
			<text>极致纯净 & 百搭</text>
			的需求而设计。 因此项目中只提供基础的
			<text>结构 和 开发依赖</text>
			，并支持以命令的方式运行，以实现自动化部署的功能！
		</view>
		<!-- 运行环境 -->
		<view class="title">运行环境：</view>
		<ul class="border m-pl-80">
			<li>Node.js 20.12.2</li>
			<li>npm 10.5.0</li>
			<li>yarn 1.22.19</li>
			<li>Vite 4.3.5</li>
			<li>Vue 3.3.11</li>
		</ul>
		<!-- 项目特点 -->
		<view class="title">项目特点：</view>
		<ul class="border m-pl-80">
			<li>基于 VUE3 开发，支持 Composition API 和 Options API 两种模式</li>
			<li>支持 Vuex 持久化</li>
			<li>支持 路由拦截</li>
			<li>CSS原子化</li>
			<li>HTTP请求接口封装</li>
			<li>支持命令行运行（支持自动化部署）</li>
			<li>支持 ESLint & Prettier 代码规范</li>
			<li>全局 & 通用方法的封装</li>
		</ul>
		<!-- CSS原子化 -->
		<view class="title">CSS原子化：</view>
		<ul class="border m-pl-80">
			<li class="p">项目中集成了 <text>flex、margin、padding</text> 三种布局类的原子化样式</li>
			<li class="p">
				布局类原子化类名构成：<text>前缀-类型[方向]-数值</text>，例如：<text>m-ma-auto、m-pl-100</text>，其中
				<text>m</text> 是前缀，<text>ma</text> 是类型，<text>auto 或 10</text> 是数值
			</li>
			<li class="p">支持 !important 加权重，可以在类后拼接 <text>__i</text>，例如：<text>u-flex__i</text></li>
			<li class="p">
				支持列表：<br />
				<text>m-ma-*</text>、 <text>m-ml-*</text>、 <text>m-mr-*</text>、 <text>m-mt-*</text>、 <text>m-mb-*</text
				><br />
				<text>m-pa-*</text>、 <text>m-pl-*</text>、 <text>m-pr-*</text>、 <text>m-pt-*</text>、 <text>m-pb-*</text
				><br />
				<text>m-flex-*</text>、 <text>m-flex</text>、 <text>m-flex-column</text>、 <text>m-flex-wrap</text>、
				<text>m-flex-nowrap</text>、 <text>m-col-center</text>、 <text>m-col-top</text>、 <text>m-col-bottom</text>、
				<text>m-row-left</text>、 <text>m-row-center</text>、 <text>m-row-right</text>、 <text>m-row-between</text>、
				<text>m-row-around</text>
			</li>
			<li class="p">支持根据具体业务，在 <text>global.scss</text> 中追加</li>
		</ul>
		<!-- Vuex实现数据的持久化 与 数据混入到全局实例 -->
		<view class="title">Vuex实现数据的持久化 与 数据混入到全局实例：</view>
		<view class="p">参考项目文档：<text>README.md</text></view>
		<!-- 全局 & 通用方法的封装 -->
		<view class="title">全局 & 通用方法的封装</view>
		<view class="p">参考项目文档：<text>README.md</text></view>
		<!-- 请求的处理 -->
		<view class="title">请求的处理</view>
		<view class="p">参考项目文档：<text>README.md</text></view>
		<!-- 占位 -->
		<view class="m-pt-160" />
	</view>
</template>

<script>
export default {
	name: 'HomeIndex'
};
</script>

<style scoped lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 100rpx auto 60rpx;
	}
	.title {
		width: 100%;
		text-align: left;
		font-weight: bold;
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}
	.h1 {
		text-align: center;
		font-weight: bold;
		font-size: 48rpx;
		text-transform: uppercase;
	}
	.p {
		width: 100%;
		font-size: 32rpx;
		line-height: 1.55;
		text {
			display: inline-block;
			font-size: 28rpx;
			line-height: 1.5;
			color: black;
			background-color: rgba(0, 122, 255, 0.2);
			border-radius: 4rpx;
			padding: 0 8rpx;
		}
	}
	.border {
		border: dotted 2rpx $uni-color-primary;
		padding: 20rpx;
	}
	ul {
		width: 100%;
		padding-left: 60rpx !important;
		li {
			font-size: 32rpx;
			line-height: 1.5;
			list-style: auto;
		}
	}
	.code {
		width: 100%;
		text-align: left;
		color: white;
		background-color: #2c405a;
		padding: 40rpx;
	}
}
</style>
